<template>
    <div class="app-container">

        <el-table v-loading="loading" :data="Comments">
            <el-table-column width="55" align="center" />
            <el-table-column label="用户" align="center" prop="user" />
            <el-table-column label="内容" align="center" prop="content" />
            <el-table-column label="评论的景点" align="center" prop="attraction" />

            <el-table-column label="创造时间" align="center" prop="createTime" />

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['system:Comments:remove']">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>

import { getComment, delComments } from '../../../api/system/comments';
import { getUser } from '../../../api/system/user';
import { getAttraction } from '../../../api/system/attraction';
export default {
    name: "Comments",
    dicts: ['sys_normal_disable', 'sys_number'],
    data() {
        return {
            columnsToShow: ['city', 'address', 'views', 'openTime', 'price'],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 岗位表格数据
            Comments: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            Image: false,
            fileList: [],
            // 表单参数
            form: {},
            queryParams: {
                pageNum: 1,
                pageSize: 999,
            },
            // 表单校验
            rules: {
                CommentsName: [
                    { required: true, message: "岗位名称不能为空", trigger: "blur" }
                ],
                CommentsCode: [
                    { required: true, message: "岗位编码不能为空", trigger: "blur" }
                ],
                CommentsSort: [
                    { required: true, message: "岗位顺序不能为空", trigger: "blur" }
                ]
            }
        };
    },
    created() {
        this.getList();
    },
    methods: {
        shouldShowColumn(column) {
            // 检查columnsToShow数组中是否包含当前列名，并确保至少有一条记录包含此字段的值。
            if (!this.columnsToShow.includes(column)) return false;

            for (let item of this.Comments) {
                if (item[column]) return true;
            }
            return false;
        },
        /** 查询列表 */
        getList() {
  this.loading = true;
  getComment(this.queryParams).then(response => {
    this.Comments = response.rows;
    console.log(this.Comments,123456);
    
    // 使用Promise.all来并行处理所有请求
    const promises = this.Comments.map(item => {
      return Promise.all([
        getUser(item.userId).catch(error => {
          console.error(`Error fetching user for userId ${item.userId}:`, error);
          return null; // 返回null以避免后续操作失败
        }),
        getAttraction(item.attractionId).catch(error => {
          console.error(`Error fetching attraction for attractionId ${item.attractionId}:`, error);
          return null; // 返回null以避免后续操作失败
        })
      ]).then(([userResponse, attractionResponse]) => ({
        ...item,
        user: userResponse ? userResponse.data.nickName : null,
        attraction: attractionResponse ? attractionResponse.data.attractionName : null
      }));
    });

    Promise.all(promises).then(detailedComments => {
      console.log(detailedComments);
      this.Comments = detailedComments
    this.loading = false;

      // 这里可以进行进一步的处理或存储detailedComments
    }).catch(error => {
      console.error("Error fetching comments, users, or attractions:", error);
    });
  }).catch(error => {
    console.error("Error fetching comments:", error);
  });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                CommentsName: undefined,
            };
            this.resetForm("form");
        },
        // 多选框选中数据
        // handleSelectionChange(selection) {
        //     this.ids = selection.map(item => item.CommentsId)
        //     this.single = selection.length != 1
        //     this.multiple = !selection.length
        // },
        /** 新增按钮操作 */
        // handleAdd() {
        //     this.reset();
        //     this.open = true;
        //     this.title = "添加分类";
        // },
        /** 修改按钮操作 */
        // handleUpdate(row) {
        //     this.reset();
        //     console.log(row);
        //         this.form = row;
        //         this.open = true;
        //         this.title = "修改分类";
        // },
        /** 提交按钮 */
        // submitForm: function () {
        //     this.$refs["form"].validate(valid => {
        //         if (valid) {
        //             if (this.title == '修改分类') {
        //                 updateComments(this.form).then(response => {
        //                     this.$modal.msgSuccess("修改成功");
        //                     this.open = false;
        //                     this.getList();
        //                 });
        //             } else {
        //                 addComments(this.form).then(response => {
        //                     this.$modal.msgSuccess("新增成功");
        //                     this.open = false;
        //                     this.getList();
        //                 });
        //             }
        //         }
        //     });
        // },
        /** 删除按钮操作 */
        handleDelete(row) {
            console.log(row);
            
            const commentId = row.commentId;
            this.$modal.confirm('是否确认删除岗位编号为"' + commentId + '"的数据项？').then(function () {
                return delComments(commentId);
            }).then(() => {
                this.$modal.msgSuccess("删除成功");

                this.getList();
            }).catch(() => { });
        },

    }
};
</script>